<template>
    <div class="itemMusicList">
        <div class="itemListTop">
            <div class="listLeft">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofanganniu"></use>
                </svg>
                <span class="playall">播放全部<span class="listNum">(共{{itemList.length}}首)</span></span>
            </div>
            <div class="listRight">
                <svg class="icon socang" aria-hidden="true">
                    <use xlink:href="#icon-jiahao"></use>
                </svg>
                <span>收藏({{subscribedCount}})</span>
            </div>
        </div>
        <div class="itemList">
            <div class="item" v-for="(item,i) in itemList" :key="i">
                <div class="ltemLeft" @click="playMusic(i)">
                    <span class="leftSpan">{{i+1}}</span>
                    <div>
                        <p>{{item.name}}</p>
                        <span  class="arName" v-for="(item1,index) in item.ar" :key="index">{{item1.name}}</span>
                    </div>
                </div>
                <div class="itemRight">
                    <svg class="icon shipin" aria-hidden="true" v-if="item.mv!=0">
                        <use xlink:href="#icon-shipin"></use>
                    </svg>
                    <svg class="icon liebiao" aria-hidden="true">
                        <use xlink:href="#icon-31liebiao"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapMutations } from 'vuex';
export default{
    setup(props){
        console.log(props);
    },
    props:['itemList','subscribedCount'],
    methods:{
        playMusic:function(i){
            this.updatePlayList(this.itemList);
            this.updatePlayIndex(i);
        },
        ...mapMutations(['updatePlayList','updatePlayIndex'])
    }
}
</script>
<style lang="less" scoped>
.itemMusicList{
    width: 100%;
    background-color: #fff;
    padding: 0 0.2rem;
    margin-top: .2rem;
    border-top-left-radius: .4rem;
    border-top-right-radius: .4rem;
    .itemListTop{
        width: 100%;
        height: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .listLeft{
            width: 3rem;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .listNum{
                font-size: .24rem;
                color: #888;
            }          
        }
        .listRight{
            width: 2.5rem;
            height: .7rem;
            border-radius: .4rem;
            background-color: red;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            text-align: center;
            .socang{
                width: .4rem;
                height: .4rem;
            }
        }
    }
    .itemList{
        padding-bottom: 1.4rem;
        .item{
            width: 100%;
            height: 1.2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .ltemLeft{
                height: 100%;
                display: flex;
                align-items: center;
                .leftSpan{
                    // margin-right: .2rem;
                    width: .6rem;
                }
                .arName{
                    font-size: .24rem;
                    color: #888;
                }
            }
            .itemRight{
                height: 100%;
                display: flex;
                align-items: center;
                .shipin{
                    fill: #888;
                    margin-right: .2rem;
                }
                .liebiao{
                    fill: #888;
                }
            }
        }
    }
}
</style>